<template>
    <div>
        <Table :columns="columns2" :data="data4" border>
            <template slot-scope="{ row }" slot="industryName">
                <span >{{ row.industryName }}</span>
            </template>

            <template slot-scope="{ row }" slot="industryCount">
                <Input type="text" v-model="editObj.industryCount" v-if="editIndex === index" />
                <span v-else>{{ row. industryCount}}</span>
            </template>

            <template slot-scope="{ row }" slot="action">
                <div v-if="editIndex === index">
                    <Button @click="handleSave(index)">保存</Button>
                    <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                    <Button @click="handleEdit(row, index)">操作</Button>
                </div>
            </template>
        </Table>
        <div class="submit-button">
            <i-button type="primary" @click="handleSubmit()">上报</i-button>
        </div>
    </div>
</template>

<script>
// 行业维护
export default {
  data () {
    return {
      columns2: [
        {
          title: '行业名称',
          slot: 'industryName'
        },
        {
          title: '行业总数',
          slot: 'industryCount'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          fixed: 'right'
        }
      ],
      data4: [
        {
          industryName: '餐饮',
          industryCount: '45'
        },
        {
          industryName: '服务业',
          industryCount: '98'
        }
      ],
      editObj: {
        industryCount: ''
      },
      editIndex: -1 // 当前聚焦的输入框的行数
    }
  },
  methods: {
    handleEdit (row, index) {
      this.editVehicleNumber = row.vehicleNumber
      this.editShifts = row.shifts
      this.editCapacityNum = row.capacityNum
      this.editIndex = index
    },
    handleSave (index) {
      this.data[index].vehicleNumber = this.editVehicleNumber
      this.data[index].shifts = this.editShifts
      this.data[index].capacityNum = this.editCapacityNum
      this.editIndex = -1
    },
    handleSubmit () {
      // this.$refs[name].validate((valid) => {
      //   if (valid) {
      //     this.$Message.success('提报成功!')
      //   } else {
      //     this.$Message.error('提报失败!')
      //   }
      // })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }

}
</script>

<style scoped>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
</style>
